<template> 
    <div class="main">
        <Title></Title>
        <div class="content">
            <div class="swiper-container">
                <div class="swiper-wrapper" >
                    <div class="swiper-slide" v-for="item in swp" :key="item.id">
                        <img :src="$baseurl+'/'+item.img" />
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="option">
                <li v-for="item in opt" :key="item.index">
                    <font :class="'iconfont '+item.font" :style="'color:'+item.color"></font>
                    <br />{{item.text}}
                </li>
            </div>
        </div>
    </div>
</template> 

<script> 
import Title from '../components/Title'   
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css' 
export default {
    components: {
        Title
    },
    data (){
        return {
            swp: [],
            opt:[
                {font:'icon-wenjianbangong_bangongyongpin_yanjing',text:'镜架',color:"#080403"},
                {font:'icon-glass',text:'墨镜',color:"#71c69c"},
                {font:'icon-xinpin',text:'新品',color:"#ff5d1d"},
                {font:'icon-jingtoushezhi',text:'镜片',color:"#4851da"},
                {font:'icon-baokuan1',text:'爆款',color:"#f782ac"},
                {font:'icon-biaodan',text:'验光单',color:"#4b8ce6"},
                {font:'icon-quan',text:'领500元',color:"#ea402a"},
                {font:'icon-jifen1',text:'积分',color:"#0c75c6"},
            ]
        }
    },
    async mounted (){
        let { data } = await this.$axios.get(this.$baseurl+'/swp1')
        if(data.length != 0){
            this.swp = data 
            // 解决方法: 在获取完数据后，将swiper放在$nextTick下一个UI帧再初始化。
            this.$nextTick(() => {
                this.initSwiper()
            })

        }
        
       
    },
    methods: {
        initSwiper () {
            this.mySwiper = new Swiper('.swiper-container', {
                observer:true,// 启动动态检查器(OB/观众/观看者)
                observeParents:true, // 修改swiper的父元素时，自动初始化swiper
                loop:true,
                autoplay: {
                    delay: 2000
                },
                pagination: {
                    el: '.swiper-pagination',
                },
            });   
        }
    }

}
</script>

<style lang='scss'>
    .content{

        .swiper-slide{
            img{
                height: 4.26rem;
                width: 100%;
                display: block;
            }
        }
        .swiper-pagination-bullet {
            width: 0.12rem;
            height: 0.12rem;
            display: inline-block;
            border-radius: 100%;
            background: #888;
            opacity: 1;
        }
        .swiper-pagination-bullet-active{
            background: #d61619;
        }
        .option{
            display: flex;
            flex-wrap: wrap;
            background: #f2f2f2;
            padding: 0.1rem 0;
            li{
                font-size: 0.26rem;
                color: #000;
                flex: 25%;
                text-align: center;
                margin: 0.1rem 0;
                font{
                    font-size: 0.7rem;
                    line-height: 0.7rem;
                }

            }
        }
    }

</style>
